import React, { useState } from 'react';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import './Navbar.css';

const Navbar: React.FC = () => {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  const isActive = (path: string) => {
    return location.pathname === path;
  };

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  return (
    <nav className="navbar">
      <div className="container">
        <div className="navbar-content">
          {/* Logo */}
          <Link to="/dashboard" className="navbar-brand">
            <span className="brand-icon">📊</span>
            资产管理系统
          </Link>

          {/* 导航菜单 */}
          <div className={`navbar-menu ${isMenuOpen ? 'active' : ''}`}>
            <div className="navbar-nav">
              <Link 
                to="/dashboard" 
                className={`nav-link ${isActive('/dashboard') ? 'active' : ''}`}
                onClick={() => setIsMenuOpen(false)}
              >
                <span className="nav-icon">🏠</span>
                仪表板
              </Link>
              
              <Link 
                to="/assets" 
                className={`nav-link ${isActive('/assets') ? 'active' : ''}`}
                onClick={() => setIsMenuOpen(false)}
              >
                <span className="nav-icon">📦</span>
                资产管理
              </Link>
              
              <Link 
                to="/inventory" 
                className={`nav-link ${isActive('/inventory') ? 'active' : ''}`}
                onClick={() => setIsMenuOpen(false)}
              >
                <span className="nav-icon">📋</span>
                盘点记录
              </Link>

              {/* 管理员菜单 */}
              {user?.role === 'admin' && (
                <Link 
                  to="/users" 
                  className={`nav-link ${isActive('/users') ? 'active' : ''}`}
                  onClick={() => setIsMenuOpen(false)}
                >
                  <span className="nav-icon">👥</span>
                  用户管理
                </Link>
              )}
            </div>

            {/* 用户信息和操作 */}
            <div className="navbar-user">
              <div className="user-info">
                <span className="user-icon">👤</span>
                <span className="username">{user?.username}</span>
                <span className={`user-role ${user?.role}`}>
                  {user?.role === 'admin' ? '管理员' : '普通用户'}
                </span>
              </div>
              
              <div className="user-actions">
                <button 
                  className="btn btn-secondary btn-sm"
                  onClick={() => {
                    // 这里可以添加修改密码的功能
                    console.log('修改密码');
                  }}
                >
                  修改密码
                </button>
                
                <button 
                  className="btn btn-danger btn-sm"
                  onClick={handleLogout}
                >
                  退出登录
                </button>
              </div>
            </div>
          </div>

          {/* 移动端菜单按钮 */}
          <button 
            className="navbar-toggle"
            onClick={toggleMenu}
            aria-label="切换菜单"
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;
